<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<style>
    .tab {
        margin-bottom: 0px;
        margin-top: 6px;
    }

    .tab > li > a {
        line-height: 22px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    .tab-content {
        border: 1px solid #E3E3E3;
        border-radius: 0px 0px 4px 4px;
        border-top: none;
        padding: 2px;
    }

    .table [valign="top"] {
        vertical-align: top;
    }

    #newOrder div[id^=m] {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        margin: 2px;
        padding: 2px;
        line-height: 25px;
        float: left;
        width: 45%;
        min-height: 225px;
    }

    #newOrder div[id^=m] span {
        float: left;
    }

    .title {
        width: 60px;
        margin-left: 20px;
    }
</style>
<ul class="nav nav-tabs tab tBlock">
    <li class="active">
        <a title="新增订单" deny="not" class="nFocus" href="#newOrder" data-toggle="tab">
            <i class="icon-heart"></i>
            我要下单
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="newOrder">
        <form id="inputForm" class="form-inline" action="${ctx}/adoms/order/order" method="post">
            <input type="hidden" name="id" value="${order.id}"/>
            <table class="table table-striped table-bordered table-condensed">
                <tr>
                    <td class="span2">发货部门:</td>
                    <td>
                        <select id="departmentTarget" name="departmentTarget.id">
                            <option id="dPlz">请选择...</option>
                            <c:forEach items="${dList }" var="d" varStatus="index">
                                <option value="${d.id }">${index.index + 1}.${d.name }</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="span2">订购商品:</td>
                    <td>
                        <select id="marchandise" name="marchandise.id">
                            <option id="plz">请选择...</option>
                            <c:forEach items="${mList }" var="m" varStatus="index">
                                <option value="${m.id }">${index.index + 1}.${m.name }</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="span2" valign="top">商品详情:</td>
                    <td>
                        <i class="icon-eye-open"></i>
                        <a id="idShow" deny="not">显示商品详情</a>

                        <div id="eyeInfo" class="hide">
                            <c:forEach items="${mList }" var="m" varStatus="index">
                                <div class="hide" id="m${m.id }">
                                    <span class="title">商品名称：</span>
                                    <span class="span3">${index.index + 1}.${m.name }</span>
                                    <br/>
                                    <span class="title">商品编号：</span>
                                    <span class="span3">${m.code }</span>
                                    <br/>
                                    <span class="title">单价：</span>
									<span class="span3 tBlue">
										<span mprice="mPrice">${m.price }</span>
										元
									</span>
                                    <br/>
                                    <span class="title">商品条码：</span>
                                    <span class="span3">${m.barCode }</span>
                                    <br/>
                                    <span class="title">品牌：</span>
                                    <span class="span3">${m.brand.name }</span>
                                    <br/>
                                    <span class="title">产地：</span>
                                    <span class="span3">${m.producePlace }</span>
                                    <br/>
                                    <span class="title">生产日期：</span>
                                    <span class="span3">${m.produceDate }</span>
                                    <br/>
                                    <span class="title">保质期：</span>
                                    <span class="span3">${m.shelflife }</span>
                                    <br/>
                                    <span class="title">商品描述：</span>
                                    <span class="span3">${m.description }</span>
                                    <br/>
                                </div>
                            </c:forEach>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>商品单价:</td>
                    <td class="tBlue">
                        ￥
                        <span id="mPrice" class="tRed">0.00</span>
                        (元)
                    </td>
                </tr>
                <tr>
                    <td>订购数量:</td>
                    <td>
                        <input class="span1" id="goodsNumber" name="goodsNumber" type="text" value="1" size="30"
                               maxlength="4"/>
                        (件)
                    </td>
                </tr>
                <tr>
                    <td>总价:</td>
                    <td>
                        <input id="totalCost" readonly="readonly" class="span2" name="totalCost" type="text"
                               value="0.00" size="30" maxlength="8"/>
                        (元)
                    </td>
                </tr>
                <tr>
                    <td class="span2">订单名称:</td>
                    <td>
                        <input id="name" class="span4" name="name" type="text" value="${order.name}" size="30"
                               maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td>联系电话:</td>
                    <td>
                        <input id="phone" name="phone" type="text" value="${order.phone}" size="30" maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td>收货部门:</td>
                    <td>
                        <span class="tBlue">${USER.department.name}</span>
                        <input id="department" name="department.id" type="hidden" value="${USER.department.id}"
                               size="30" maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td>联系人:</td>
                    <td>
                        <span class="tBlue">${USER.name }</span>
                        <input id="createUser" name="createUser" type="hidden" value="${USER.name }" size="30"
                               maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td valign="top">备注:</td>
                    <td>
                        <textarea id="memo" name="memo" rows="3" class="span6">${order.memo}</textarea>
                    </td>
                </tr>
                <tr>
                    <td align="center" colspan="2">
                        <input class="btn span2 btn-primary" disabled="disabled" type="submit" value="提交订单"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules: {
                totalCost: {
                    required: true,
                    number: true
                },
                phone: "required",
                receivedTime: "required",
                name: "required",
                orderChargeUser: "required",
                orderCreateTime: "required",
                status: "required",
                "department.id": "required",
                departmentTarget: "required",
                createUser: "required",
                goodsNumber: {
                    required: true,
                    number: true
                }
            }
        });
        //展示商品详情
        $("#idShow").toggle(function () {
            $("#eyeInfo").show("slow");
            $(this).html("隐藏商品详情");
            $(".icon-eye-open").attr("class", "icon-eye-close");
        }, function () {
            $(".icon-eye-close").attr("class", "icon-eye-open");
            $(this).html("显示商品详情");
            $("#eyeInfo").hide("slow");
        });
        //
        $("#marchandise").change(function () {
            try {
                var mid = $(this).val();
                $("div[id^=m]").hide();
                $("#m" + mid).show();
                $("#mPrice").html($("[mPrice]", $("#m" + mid)).html());
                $("#goodsNumber").keyup();
                $("#plz").remove();
            } catch (e) {
            }
        });
        $("#departmentTarget").change(function () {
            $("#dPlz").remove();
        });
        //计算总价
        $("#goodsNumber").keyup(function () {
            var number = parseInt($(this).val());
            var price = parseFloat($("#mPrice").html());
            var cost = number * price;
            $("#totalCost").val(cost.toFixed(2));
            $(":submit").removeAttr("disabled");
        });
    });
</script>
<c:if test="${msg != null}">
    <script>
        $(function () {
            msgAlert.show("${msg}");
        });
    </script>
</c:if></body>
</html>